<template>
	<view class="container">
		<view class="shadow" />
		<image class="back-img"
			:src="collection.collPhoto || slist.listPhoto || 'https://p2.music.126.net/VFd5cboNTbnYsWZ5DBn9bg==/18953381440004340.jpg'"
			mode="heightFix" />
		<scroll-view class="scroll-content" :style="scrollStyle" scroll-y>
			<view class="top-content">
				<image class="top-image" :src="collection.collPhoto||slist.listPhoto" mode="widthFix" />
				<view class="top-info">
					<view class="title">{{collection.collName||slist.listTittle}}</view>
					<view class="creator">
						<image class="creator-img" :src="collection.collPhoto||user.userPhoto" mode="widthFix" />
						<text class="creator-name">{{collection.singerName||user.userName}}</text>
					</view>
					<view class="info">{{slist.listIntroduce}}</view>
				</view>
			</view>
			<view class="song-content">
				<view class="topbar">
					<view>
						<text class="play-title" @tap="intoList">加入到播放列表</text>
						<text class="play-count">({{songs.length}})</text>
					</view>
					<view class="tubiao">
						<u-icon name="heart" color="red" size="30" @tap="Like"></u-icon>
					</view>
				</view>
				<view>
					<u-swipe-action>
						<u-swipe-action-item :options="options2" v-for="(item,index) in songs" :key="item.songId" @click="cli($event, index,item.songId)">
							<view class="swipe-action u-border-top u-border-bottom iten">
								<block>
									<view class="scroll-item" @tap="toRadio(item.songId)">
										<text class="song-number">{{index+1}}</text>
										<view class="song-info">
											<view class="song-title">{{item.songName}}</view>
											<view class="song-desc">
												{{item.singerName}} - {{item.songIntroduce}}
											</view>
										</view>
										<view class="s">
											<u-icon name="arrow-leftward"></u-icon>
										</view>
									</view>
								</block>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import commonAudio from 'components/common-audio'
	import {mapState,mapMutations } from 'vuex'
	const app = getApp()
	export default {
		components: {
			commonAudio
		},
		data() {
			return {
				scrollStyle: '',
				options2: [{
					text: '下一首播放 ',
					style: {
						backgroundColor: '#3c9cff',
						name:'next'
					}
				}, {
					text: "加入歌单",
					style: {
						backgroundColor: "#D9AFD9",
						name:"add"
					}
				}],
				id: '',
				collection: {},
				songs: [],
				slist: [],
				user: {},
				songL:[]
			}
		},
		computed:{
			...mapState('user',['userInfo']),
			...mapState('song',['songlist']),
		},
		onLoad(options) {
			this.h = uni.getSystemInfoSync().statusBarHeight
			if (options.listId != null) {
				this.id = options.listId;
				console.log(this.id);
				this.getAllInfoByListId(this.id)
			} else {
				this.id = options.CollId;
				this.getAllInfoByCollId(this.id)
			}
			console.log(this.collection.collPhoto);
		},
		methods: {
			...mapMutations('song',['setSongList','addSongList']),
			intoList(){
				for(let i =0;i<this.songL.length;i++){
					this.addSongList(this.songL[i])
				}
				uni.showToast({
					title:"加入成功",
					duration:500
				})
			},
			onShow() {
				let h = this.h
				if (app.globalData.id && app.globalData.playList.length > 0) {
					this.scrollStyle = `height: calc(100% - ${h+44+60}px);top:${h+44}px;`
					this.showAudio = true
				} else {
					this.scrollStyle = `height: calc(100% - ${h+44}px);top:${h+44}px;`
				}
			},
			async getAllInfoByCollId(id) {
				const {
					data: res
				} = await uni.$http.get("/list/toSongList?CollId=" + id)
				this.collection = res.data.collection
				this.songs = res.data.songs
				this.songL = res.data.songs
				console.log("222222222222222");
				console.log(res);
			},
			async getAllInfoByListId(id) {
				const {
					data: res
				} = await uni.$http.get("/list/findSongByListId?listId=" + id)
				console.log(res);
				this.slist = res.data.slist
				this.songs = res.data.songListVos
				this.user = res.data.userVo
				this.songL = res.data.songListVos
			},
			toRadio(id) {
				uni.navigateTo({
					url: "/pages/mus/mus?songId=" + id
				})
			},
			async Like(){
				console.log(this.id)
				console.log(this.userInfo);
				const {data:res} = await uni.$http.get("/list/insertLike",{
					userId:this.userInfo.userId,
					listId:this.id
				})
				uni.showToast({
					title: res.data||res.msg,
					duration:500
				});
			},
			gotoSongListLike(songId){
				uni.getStorage({
					key:"token",
					success() {
						uni.navigateTo({
							url:"/subpkg/songListLike/songListLike?songId="+songId
						})
					},
					fail() {
						uni.showToast({
							duration:1000,
							icon:'error',
							title:'请先登录'
						})
					}
				})
				// console.log("like"+songId);
			},
			async nextListen(songId){
				const {data:res} = await uni.$http.get('/song/find',{
					songId:songId
				})
				this.addSongList(res)
			},
			cli(e,index,id){
				switch(e.index){
					case 1:
						this.gotoSongListLike(id)
						break
					case 0:
						this.nextListen(id)
						break
				}
			}
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

	.shadow {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.2);
		z-index: 2;
	}

	.back-img {
		width: 100%;
		transform: scale(2.6);
		filter: blur(30rpx);
	}

	.scroll-content {
		position: absolute;
		top: 120rpx;
		width: 100%;
		z-index: 9;
	}

	.top-content {
		width: 100%;
		height: 340rpx;
		display: flex;
		padding: 40rpx;
	}

	.top-image {
		width: 240rpx;
		border-radius: 20rpx;
	}

	.top-info {
		flex: 1;
		padding-left: 40rpx;
		font-size: 32rpx;
		color: #fff;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	.title {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.creator {
		padding: 20rpx 0;
	}

	.creator-img {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
		vertical-align: middle;
	}

	.creator-name {
		padding-left: 20rpx;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.5);
	}

	.info {
		font-size: 24rpx;
		overflow: hidden;
		color: rgba(236, 236, 236, 0.5);
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* 列表展示区 */
	.song-content {
		width: 100%;
		background-color: #fffafa;
		height: 70%;
	}

	.topbar {
		height: 70rpx;
		line-height: 50rpx;
		display: flex;
		justify-content: space-between;
		justify-items: center;
		align-items: center;
	}
	.tubiao{
		margin-right: 30rpx;
	}

	.icon-bofang2 {
		font-size: 40rpx;
		color: #bb2921;
	}

	.iten {
		border-radius: 10%;
	}

	.play-title {
		font-size: 36rpx;
		color: #333;
		font-weight: 550;
		padding: 0 20rpx;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	.play-count {
		color: #5c5c5c;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-size: 28rpx;
	}

	.scroll-item {
		margin-top: 20rpx;
		display: flex;
		/* justify-content: space-around; */
	}

	.song-number {
		width: 80rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 45rpx;
		margin-left: 20rpx;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		color: rgba(100, 98, 98, 0.8);
	}

	.s {
		position: absolute;
		right: 60rpx;
		margin-top: 10px;
	}

	.scroll-item .song-info {
		position: relative;
		flex: 1;
		max-width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 3px;
	}

	.scroll-tip {
		text-align: center;
		line-height: 120rpx;
		height: 110rpx;
		color: #a0a0a0;
	}

	.song-info .song-title {
		font-size: 36rpx;
		color: #111;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.song-info .song-desc {
		font-size: 28rpx;
		color: #5c5c5c;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.song-info .song-desc .common {
		color: #ff7b00;
		margin-right: 5rpx;
	}

	.song-info .song-desc .bgimg {
		width: 60rpx;
		margin-right: 5rpx;
	}

	.icon-gengduo {
		font-size: 42rpx;
		color: #5c5c5c;
		line-height: 100rpx;
		padding: 0 20rpx;
	}

	.symbol {
		display: inline-block;
		font-size: 20rpx;
		height: 30rpx;
		line-height: 30rpx;
		color: #ff5100;
		border: 1rpx solid #ff5100;
		padding: 0 10rpx;
		border-radius: 6rpx;
		transform: scale(.8);
	}

	.special {
		/* transform: translateY(-4rpx) scale(.8);
  line-height: 28rpx; */
	}

	/*  */

	/* 全局覆盖 */
	.pull {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 98;
	}

	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}
</style>
